<template>
  <div class="page-container">
    首页
    <!-- A basic anchor icon from Phosphor icons -->
    <div class="i-ph-anchor-simple-thin" />
    <!-- An orange alarm from Material Design Icons -->
    <div class="i-mdi-alarm text-orange-400" />
    <!-- A large Vue logo -->
    <div class="i-logos-vue text-3xl" />
    <!-- Sun in light mode, Moon in dark mode, from Carbon -->
    <button class="i-carbon-sun dark:i-carbon-moon" />
    <button class="i-carbon-3d-cursor-alt" />
    <button class="i-carbon-3d-cursor-alt?mask" />
    <button class="i-carbon-3d-cursor-alt?bg" />
    <button class="i-carbon-3d-ica?mask" />
    <!-- Twemoji of laugh, turns to tear on hovering -->
    <div class="i-twemoji-grinning-face-with-smiling-eyes hover:i-twemoji-face-with-tears-of-joy" />
    <el-radio-group v-model="systemStore.showDrawer" style="margin-bottom: 20px">
      <el-radio-button :value="true">展开或显示</el-radio-button>
      <el-radio-button :value="false">折叠或隐藏</el-radio-button>
    </el-radio-group>
    <div></div>
    <el-radio-group v-model="systemStore.layoutRef" style="margin-bottom: 20px">
      <el-radio-button value="SplitLevelLayout">导航栏独占整行</el-radio-button>
      <el-radio-button value="BiDirectionalSplitLayout">菜单独占左侧</el-radio-button>
      <el-radio-button value="StackedLayout">导航栏和菜单合并</el-radio-button>
      <el-radio-button value="MobileLayout">手机</el-radio-button>
    </el-radio-group>
    <div></div>
    <el-button @click="toggleDark()">
      <span class="ml-2">{{ isDark ? 'Dark' : 'Light' }}</span>
    </el-button>
    菜单背景颜色
    <el-color-picker
      v-model="systemStore.menuBackgroundColorRef"
      :predefine="predefineBackgroundColors"
    />
    菜单字体颜色
    <el-color-picker v-model="systemStore.menuTextColorRef" :predefine="predefineTextColors" />
    菜单激活颜色
    <el-color-picker
      v-model="systemStore.menuActiveTextColorRef"
      :predefine="predefineActiveTextColors"
    />
    <el-input v-model="textarea1" autosize placeholder="Please input" type="textarea" />
    <div style="margin: 20px 0" />
    <el-input
      v-model="textarea2"
      :autosize="{ minRows: 2, maxRows: 4 }"
      placeholder="Please input"
      type="textarea"
    />
    <icon-selector containerHeight="400px" :showName="true" :search="textarea1" />
    <markdown-editor id="test" :showEditor="showEditor" :el="editorRef" />
    <el-button plain @click="dialogVisible = true"> Click to open the Dialog </el-button>
    <el-dialog
      v-model="dialogVisible"
      title="Tips"
      width="500"
      destroy-on-close
      @opened="showEditor = true"
      @closed="showEditor = false"
    >
      <div ref="editorRef"></div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="dialogVisible = false"> Confirm </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
const MarkdownEditor = defineAsyncComponent(() => import('@/components/editor/MarkdownEditor.vue'))
const IconSelector = defineAsyncComponent(() => import('@/components/icons/IconSelector.vue'))

import { useSystemStore } from '@/stores/system'
import { useToggle } from '@vueuse/shared'
import { useDark } from '@vueuse/core'
const dialogVisible = ref(false)
const showEditor = ref(false)
const systemStore = useSystemStore()
const textarea1 = ref('')
const textarea2 = ref('')
const editorRef = ref()
//使用element plus切换明暗模式
const isDark = useDark({
  selector: 'html',
  attribute: 'class',
  valueDark: 'dark',
  valueLight: 'light'
})
const toggleDark = useToggle(isDark)
const predefineBackgroundColors = ref(['#545c64'])
const predefineTextColors = ref(['#fff', '#eaeaea'])
const predefineActiveTextColors = ref(['#ffd04b', '#409eff'])
</script>
<style lang="scss" scoped>
.page-container {
  .box-card {
    div.flex::after {
      content: '';
      display: block;
      flex: 1 1 auto;
    }
  }
}
</style>
